<%@page import="ua.org.energy.vkek.site.model.ArticleCategory"%>
<%@page import="ua.org.energy.vkek.site.server.CategoryUtils"%>
<%@page import="ua.org.energy.vkek.site.model.BaseEntity.EntityPathElement"%>
<%@page import="com.google.appengine.api.datastore.KeyFactory"%>
<%@page import="ua.org.energy.vkek.site.model.Article"%>
<%@page import="ua.org.energy.vkek.site.server.ArticleUtils"%>
<%@page import="ua.org.energy.vkek.site.model.ArticleTag"%>
<%@page import="java.util.List"%>
<%@page import="ua.org.energy.vkek.site.server.TagUtils"%>
<%@page import="ua.org.energy.vkek.site.server.EMF"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>articles</title>
        <script type="text/javascript" src="/js/jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                
                $(".run").click(function(event){
                    var params=new Object();
                    params.action="ins";
                    params.seltag=$("#tag").val();
                    params.atitle=$("#title").val();
                    params.acontent=$("#content").val();
                   
                    //http://api.jquery.com/jQuery.post/
                    $.ajax({
                        type: "POST",
                        url: "/json/article",  
                        data: params,
                        success:function(data) {  //пришел ответ от сервера
                            var title=$("<p/>").text("Статья "+data.ent.articleTitle).addClass("a-header");
                            var ident=$("<p/>").text("Ключ "+data.ent.ident);
                            var date=$("<span/>").text(data.ent.articleDate);
                            var article=$("<div/>").attr("id", data.ent.ident)
                            .appendTo("#reply")
                            .append(title)
                            .append(ident).bind("click",getArticleContent);
                            
                            var path=$("<div/>").appendTo(article).addClass("entity-path");
                            $(data.entityPath).each(function(){
                                $("<a/>").attr("href",this.elKey).text(this.elName).appendTo(path);
                            });
                            path.append(date);
                                        
                        },
                        dataType: "json"
                    });
                    
                    
                });
                
                function getArticleContent(event) {
                    var div=$(this);
                    var params=new Object();
                    params.action="get";
                    params.content="1";
                    params.akey=div.attr("id");
                    $.getJSON("/json/article",
                    params,
                    function(data) {  //пришел ответ от сервера
                        $("#viewer").html("").html(data.ent.content).show();
                    });
                }
                
                
                $(".gencontent").click(function(){
                    var content="<h1>"+$("#title").val()+"</h1>";
                    content=content+$("#dumdata").html();
                    content=content+"<h1>The End</h1>";
                    //alert(content);
                    $("textarea").val(content);       
                });
                
                
                $(document).ajaxError(function($e, jqxhr, settings, exception){
                    alert(exception);
                });
                
                             
                $("#reply>div").bind("click",getArticleContent );
                 
                $("#viewer").click(function(){
                    $(this).hide();
                })
                 
                $(".wait").ajaxStart(function(){
                    $(this).show();       
                });              
               
                $(".wait").ajaxStop(function(){
                    $(this).hide();       
                });        
            });
        </script>
        <style type="text/css">
            body, html {margin:0;padding:0;
                        color:#000;}
            #viewer{
                width:80%;
                position: fixed;
                top:3%;
                left:10%;
                border:green dotted;
                margin: 0px;
                padding: 3px;
                cursor: pointer;
                background: white;
            }
            #dumdata {
                display: none;
            }
            #reply> div {border-style: dotted;
                         border-color: green;
                         margin:1px;
                         padding:3px;
                         font-size:small;
                         cursor:pointer;
            }
            #reply p {
                margin:1px;
                padding:1px;
            }
            .wait {
                background-image: url("/i/wait_64x64.gif");
                background-position:center;
                background-repeat: no-repeat;
                background-color: white;
                position:fixed;
                width: 100%;
                height: 100%;
                display:none;
                z-index: 3;
            }
            #reply .entity-path {
                background: #86caff;
                border-style:  none;
            }
            .entity-path a,span {
                margin: 1px;
            }
            .a-header {
                background: yellowgreen;
                margin:0px 0px 3px;
                font-size: medium;

            }

        </style>
    </head>
    <body>
        <div>
            <ul>
                <%
                    CategoryUtils utilsC = new CategoryUtils(EMF.getEM());
                    List<ArticleCategory> list = utilsC.listAll();
                    for (ArticleCategory cat : list) {
                        out.println("<li><span>" + cat.getCategoryName() + "</span><span>Ключ:" + KeyFactory.keyToString(cat.getIdent()) + "</span></li>");
                    }
                %>
            </ul>

            <ul>
                <%
                    TagUtils utilsT = new TagUtils(EMF.getEM());
                    List<ArticleTag> listT = utilsT.listAll();
                    for (ArticleTag tag : listT) {
                        out.println("<li><span>" + tag.getTagName() + "</span><span>Ключ:" + KeyFactory.keyToString(tag.getIdent()) + "</span></li>");
                    }
                %>
            </ul>
        </div>
        <div>
            <form action="" name="af">
                <fieldset>
                    <legend>insert article</legend>
                    <input id="tag" name="tag" type="text" title="input tag" value="[insert tag]"/>
                    <br/>
                    <input id="title" name="atitle" type="text" title="input title" value="[insert title]"/>
                    <input class="gencontent" type="button" value="generate content"/>
                    <br/>
                    <textarea id="content" name="content" cols="99" rows="23">
                       
                    </textarea>
                    <br/>
                    <input class="run" type="button" value="insert"/>

                    <input class="update" type="button" value="edit"/>
                </fieldset>
            </form>
        </div>
        <div id="reply">
            <div class="wait"></div>
            <%
                ArticleUtils au = new ArticleUtils(EMF.getEM());
                List<Article> alist = au.listAll();
                for (Article a : alist) {
                    out.println("<div id=" + KeyFactory.keyToString(a.getIdent()) + ">");
                    out.println("<p class=\"a-header\">"+ a.getArticleTitle() +   "<span style=\"font-size:x-small;\"> :статья</span>" +"</p>");
                    out.println("<p>" + "Decoded Ключ " + a.getIdent() + "</p>");
                    out.println("<p>" + "Encoded Ключ " + KeyFactory.keyToString(a.getIdent()) + "</p>");
                    out.println("<div class=\"entity-path\">");
                    for (EntityPathElement pathEl : a.getEntityPath()) {
                        out.print("<a href=\"" + KeyFactory.keyToString(pathEl.elKey()) + "\">" + pathEl.elName() + "</a>");
                    }
                    out.print("<span>" + a.getArticleDate() + "</span>");
                    out.println("</div>");
                    out.println("</div>");
                }
            %>

        </div>
        <div id="viewer">

        </div>
        <div id="dumdata">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
            </p>

        </div>
    </body>
</html>
